<template>
    <div class='bgff pd pt10 pm10 aboutUs'>
        <!-- <p>
            基本设置
        </p> -->
        <div class="mt20">
            <n-form ref="formRef" label-placement="left" label-width="auto" :model="formValue" :rules="rules" :style="{
                maxWidth: '640px'
            }">
                <!-- <n-form-item label="产品标题:" path="title">
                    <n-input v-model:value='formValue.title' placeholder="输入产品标题" />
                </n-form-item> -->

                <n-form-item label="封面:" path="cover">
                    <div class="cover-context vertical-center" @click="cpphotoShowModal = true">
                        <img :src="formValue.cover" v-if="formValue.cover" class="w100 h100 imgjz" />
                        <i class="iconfont dx-24gl-pictures fz32" v-else></i>
                    </div>
                </n-form-item>
            </n-form>
        </div>

<!-- 
        <p>页面设置</p> -->
        <div class="productCenter-top mt20">
            <img :src="form.head.img" class="productCenter-top-img">
            <div class="wd pr h100" @click="photoShowModal = true">
                <div class="vertical-center tl h100">
                    <div @click.stop="nullfun" class="w100">
                    
                        <div class="title-text fz32 flex-1 cf ">
                            <n-input class="fz32" v-model:value="form.head.title" type="text" placeholder=""
                                size="medium" clearable></n-input>
                        </div>
                        <p class="fz18 cf mt10">
                            <n-input v-model:value="form.head.msg" type="text" placeholder="" size="medium"
                                clearable></n-input>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <p class="fz32 mt20">
            产品核心

        </p>
        <n-input v-model:value="form.Coreproduct" type="textarea" placeholder="" size="medium" clearable @change=""></n-input>
        
        <div class="wd core-technology mt40">
            <div v-for="(item, idx) in form.kernel.list" class="pr">
                <p class="cen coreTechnologyIcon-img-box">
                    <img :src="item.img" class="cz" @click="upkerimg(item)">
                </p>
                <p class="fz22 cen mt10">
                    <n-input v-model:value="item.title" type="text" placeholder="" size="medium" clearable
                        @change=""></n-input>

                </p>
                <p class="coreTechnologyIcon-text mt20 cen">
                    <n-input v-model:value="item.msg" type="textarea" placeholder="" size="medium" clearable
                        @change=""></n-input>

                </p>
                <i class="dx-shanchu iconfont red drtytsaxe3" @click="delimgteam(idx)"></i>
            </div>
            <div class="products-context vertical-center fz20 sz" @click="addHx">
                点击添核心技术
            </div>


        </div>


        <p class="fz32 mt20">
            功能介绍
        </p>

        <img :src="form.developmentHistoryImg" class="w100 mt80 cz imgjz sdffgdt" @click="photoShowModalsi=true">


      
        <n-modal v-model:show="photoShowModal" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>头图</div>
            </template>
            <div>
                <photoGallery @getImg="getImg" types="迪聚海思头图"></photoGallery>
            </div>
            <template #action>
                <div class="tr">
                    <n-button @click="photoShowModal = false"> 取消 </n-button>
                    <n-button class="ml10" type="info" @click="setImg"> 确定 </n-button>
                </div>
            </template>
        </n-modal>

        <div class="aboutUs-bottom vertical-center">
            <div>
                <n-button type="primary" size="medium" @click="addNews">保存</n-button>
                <n-button type="primary" size="medium" @click="callBack" class="ml20">返回上一页</n-button>
            </div>

        </div>
    </div>



    <n-modal v-model:show="cpphotoShowModal" preset="card" class="Stock-diagnosis">
        <template #header>
            <div>产品封面</div>
        </template>
        <div>
            <photoGallery @getImg="getImgcp" types="迪聚产品封面"></photoGallery>
        </div>
        <template #action>
            <div class="tr">
                <n-button @click="cpphotoShowModal = false"> 取消 </n-button>
                <n-button class="ml10" type="info" @click="setImgcp"> 确定 </n-button>
            </div>
        </template>
    </n-modal>


    <n-modal v-model:show="photoShowModaler" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>核心技术logo</div>
            </template>
            <div>
                <photoGallery @getImg="getImger" types="迪聚海思核心技术logo"></photoGallery>
            </div>
            <template #action>
                <div class="tr">
                    <n-button @click="photoShowModaler = false"> 取消 </n-button>
                    <n-button class="ml10" type="info" @click="setImger"> 确定 </n-button>
                </div>
            </template>
        </n-modal>

        <n-modal v-model:show="photoShowModalsi" preset="card" class="Stock-diagnosis">
        <template #header>
            <div>功能介绍</div>
        </template>
        <div>
            <photoGallery @getImg="getImgsi" types="迪聚海思功能介绍"></photoGallery>
        </div>
        <template #action>
            <div class="tr">
                <n-button @click="photoShowModalsi = false"> 取消 </n-button>
                <n-button class="ml10" type="info" @click="setImgsi"> 确定 </n-button>
            </div>
        </template>
    </n-modal>
</template>
<script lang='ts' setup>
import { ref } from "vue"
import { callBack, dxpost, qurl, dxget } from "../../../util/index"
import photoGallery from "../../../components/util/photoGallery";
const photoShowModal = ref(false)
const cpphotoShowModal = ref(false)
const photoShowModaler = ref(false)
const photoShowModalsi = ref(false)
const dqItem = ref()
const cz = qurl()
const isbj = ref(false)
const formRef = ref()
const formValue = ref({
    title: "",
    msg:"",
    cover: ""
})
const form = ref({
    head: {
        img: "",
        title: "",
        msg: ""
    },
    Coreproduct:"",
    developmentHistoryImg:"",
    kernel: {
        title: "",
        msg: "",
        list: [
        ]
    }
})

const rules = {
    cover: {
        required: true,
        message: '请上传封面',
        trigger: 'blur'
    }
}
let jjnmnxe = "";
const getImg = (data) => {
    jjnmnxe = data;
};
const setImg = () => {
    form.value.head.img = jjnmnxe;
    photoShowModal.value = false;
};



const upkerimg = (item)=>{
    photoShowModaler.value = true
    dqItem.value = item
}



let jjnmnxecp = "";
const getImgcp = (data) => {
    jjnmnxecp = data;
};
const setImgcp = () => {
    formValue.value.cover = jjnmnxecp;
    cpphotoShowModal.value = false;
};


let jjnmnxesi = "";
const getImgsi = (data) => {
    jjnmnxesi = data;
};
const setImgsi = () => {
    form.value.developmentHistoryImg = jjnmnxesi;
    photoShowModalsi.value = false;
};


const addHx = () => {
    form.value.kernel.list.push({
        img: "",
        title: "",
        msg: ""
    })
}

let jjnmnxeer = "";
const getImger = (data) => {
    jjnmnxeer = data;
};
const setImger = () => {
    console.log(jjnmnxeer);
    dqItem.value.img = jjnmnxeer
    photoShowModaler.value = false;
};
const delimgteam = (idx) => {
    form.value.kernel.list.splice(idx, 1)
}


const addNews = (e) => {
    e.preventDefault();
    formRef.value.validate((errors) => {
        if (!errors) {
            aboutSave()
        }
    });
}

const aboutSave = async () => {
    formValue.value.title = form.value.head.title
    formValue.value.msg = form.value.head.msg
    const { errno }: any = await dxpost("djhs/djproductManagement", {
        ...formValue.value,
        detail: JSON.stringify(form.value)
    }, isbj.value ? "put" : 'post')
    if (errno == 0) {
        window.$message.success("操作成功！")
        callBack()
    }
}

const getdetail = async () => {
    const { data }: any = await dxget("djhs/djproductManagement", { id: cz.id })
    if (data.detail) {
        formValue.value = {
            id:cz.id,
            title: data.title,
            cover: data.cover
        }
        form.value = JSON.parse(data.detail)
    }

}
if (cz.id) {
    isbj.value = true
    getdetail()
}

const nullfun = () => {
    console.log('66');
}

</script>
<style scoped>
.productCenter-top {
    height: 403px;
}
.products-context {
    width: 300px;
    height: 150px;
    border: 1px dashed #e0e0e0;
}

.coreTechnologyIcon-img-box img {
    background: #f8f8f8;
    min-width: 80px;
    min-height: 80px;
}

.drtytsaxe3 {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 22px;
    color: red;
    cursor: pointer;
}
</style>